<script setup>
import { ref, computed, watch } from 'vue'
import { delectPlayListAPi } from '@/apis/song.js'
import { usePlayListStore } from '@/stores/playListStore'
import { useUserInfoStore } from '@/stores/userInfoStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import SongListCard from '@/components/SongListCard/SongListCard.vue'
import MyCreateList from './MyCreateList.vue'

const usePlayList = usePlayListStore()
const useUserInfo = useUserInfoStore()

const props = defineProps({
  list: {
    type: Array
  }
})

const playList = ref([])
watch(() => props.list, () => {
  playList.value = props.list
}, { immediate: true })

// 是否显示 index；true 显示 index，false 则显示选择框
const isShowIndex = ref(true)

// 歌单的显示样式，true 以列表的形式显示，false 以卡片形式显示
const isShowModel = ref(true)

const editList = () => {
  if (!isShowModel.value) return ElMessage('卡片模式不可编辑')
  isShowIndex.value = false
}

// 是否全选
const isAllSelected = computed(() => playList.value.every(item => item.select === true))

// 全选或取消全选操作
const allSelect = (e) => {
  playList.value.forEach(item => item.select = e)
}

// 单选
const selected = (select, id) => {
  const checkout = playList.value.find(item => item.id === id)
  checkout.select = select
}

const dialogVisible = ref(false)
// 创建歌单
const createPlayList = () => {
  dialogVisible.value = true
}

// 删除歌单
const delectPlayList = async () => {
  ElMessageBox.confirm(
    '确定要删除此歌单吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const ids = []
      playList.value.forEach(item => {
        if (item.select) {
          ids.push(item.id)
        }
      })
      if (ids.length === 0) return ElMessage('请选择需要删除的歌单')
      const { data } = await delectPlayListAPi(ids.join())
      if (data.code === 200) {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        // 更新歌单数据
        usePlayList.getUserPlayList(useUserInfo.userInfo.profile.userId)
      } else {
        ElMessage('删除失败')
      }
    })
}

</script>

<template>
  <div class="my-song-list">
    <!-- 切换歌单样式 -->
    <div class="list-bar change-model" v-show="isShowIndex">
      <i class="iconfont icon-liebiaoxingshi icon-style" @click="isShowModel = true" :class="{ purple: isShowModel }"></i>
      <i class="iconfont icon-kapianxingshi icon-style" @click="isShowModel = false"
        :class="{ purple: !isShowModel }"></i>
      <!-- 编辑弹框 -->
      <el-popover popper-style="min-width: 100px;width: 108px;padding: 4px;" placement="bottom" trigger="click"
        :hide-after="100">
        <template #reference>
          <i class="iconfont icon-gengduo1" title="编辑"></i>
        </template>
        <div class="popover-text">
          <p @click="createPlayList">新建歌单</p>
          <p @click="editList">删除歌单</p>
        </div>
      </el-popover>
      <!-- / 编辑弹框 -->
    </div>
    <!-- / 切换歌单样式 -->

    <!-- 创建歌单 -->
    <MyCreateList :dialogVisible="dialogVisible" @changeVisible="dialogVisible = $event" />
    <!-- / 创建歌单 -->

    <!-- 删除歌单 -->
    <div class="list-bar" v-show="!isShowIndex">
      <div>
        <el-checkbox label="全选" :model-value="isAllSelected" size="large" @change="allSelect" />
      </div>
      <div class="right">
        <i class="iconfont icon-shanchu icon-style" @click="delectPlayList"></i>
        <i class="iconfont icon-gengduo1" @click="isShowIndex = !isShowIndex"></i>
      </div>
    </div>
    <!-- / 删除歌单 -->

    <!-- 列表样式 -->
    <div class="song-list" v-show="isShowModel">
      <Router-link :to="`/playList/${item.id}`" class="song-list-box" v-for="(item, index) in playList" :key="item.id">
        <div class="list-info">
          <span class="index" v-if="isShowIndex">
            {{ index < 9 ? '0' + (index + 1) : index + 1 }} </span>
              <span class="index" v-else>
                <el-checkbox :model-value="item.select" size="large" @click.stop @change="(e) => selected(e, item.id)" />
              </span>
              <img v-lazy-image="item.coverImgUrl + '?param=200y200'" class="userImg">
              <span class="list-name ellipsis">{{ item.name }}</span>
              <span class="list-author ellipsis">
                <img v-lazy-image="item.creator.avatarUrl + '?param=200y200'">
                {{ item.creator.nickname }}
              </span>
        </div>
        <span class="songCount">
          {{ item.trackCount }} 首
        </span>
        <div class="playCount">
          <i class="iconfont icon-tingge"></i>
          <span v-format-play-count="item.playCount"></span>
        </div>
      </Router-link>
    </div>
    <!-- / 列表样式 -->

    <!-- 卡片样式 -->
    <div class="song-list-card" v-show="!isShowModel">
      <template v-for="item in playList" :key="item.id">
        <Router-link :to="`/playList/${item.id}`">
          <SongListCard :song="item" />
        </Router-link>
      </template>
    </div>
    <!-- / 卡片样式 -->

    <!-- 空状态 -->
    <div class="none-data" v-if="!playList.length">
      <img src="@/assets/noneData.png" alt="">
      <p>空空如也</p>
      <h3>赶紧去
        <span @click="dialogVisible = true">创建歌单</span>
        或者
        <Router-link to="/login">登录</Router-link>
        账号吧
      </h3>
    </div>
    <!-- / 空状态 -->
  </div>
</template>

<style scoped lang='scss'>
.my-song-list {

  .list-bar {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon-style {
      height: 32px;
      width: 44px;
      text-align: center;
      line-height: 32px;
      font-size: 24px;
      background-color: #d7d0eb;
      cursor: pointer;
      color: #848484;

      &:hover {
        background-color: #f8f6fe;
        color: #8867f2;
      }
    }

    .icon-liebiaoxingshi {
      border-radius: 3px 0px 0px 3px;
    }

    .icon-kapianxingshi {
      border-radius: 0px 3px 3px 0px;
    }

    .right {
      display: flex;
      align-items: center;

      .icon-shanchu {
        border-radius: 3px;
      }
    }
  }

  .purple {
    color: #8867f2 !important;
    background-color: #f8f6fe !important;
    border-radius: 3px !important;
  }

  .change-model {
    justify-content: flex-end;
  }

  .song-list {
    .song-list-box {
      margin: 10px 0px;
      color: $assistText;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 40px;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 8px;
      cursor: pointer;

      &:hover {
        box-shadow: 0px 4px 4px rgba(164, 164, 164, 0.2);
      }

      .list-info {
        display: flex;
        align-items: center;
      }

      span {
        display: block;
      }

      .index {
        width: 40px;
      }

      .userImg {
        height: 70px;
        width: 70px;
        border-radius: 5px;
      }

      .list-name {
        margin-left: 10px;
        width: 260px;
        overflow: hidden;
      }

      .list-author {
        margin-left: 30px;
        width: 150px;
        overflow: hidden;
        display: flex;
        align-items: center;

        img {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          margin-right: 8px;
        }
      }

      .songCount {
        width: 200px;
        text-align: center;
        line-height: 70px;
      }

      .playCount {
        width: 100px;
        display: flex;
        align-items: center;

        .icon-tingge {
          font-size: 20px;
          margin-right: 2px;
        }
      }
    }
  }

  .song-list-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    div {
      margin: 25px 7px;
    }
  }

  .none-data {
    width: 500px;
    margin: 0 auto;

    img {
      width: 100%;
      height: 100%;
    }

    p {
      text-align: center;
      color: #949494;
      font-weight: bold;
      margin-bottom: 50px;
      letter-spacing: 2px;
      font-size: 15px;
    }

    h3 {
      text-align: center;
      line-height: 70px;

      a,
      span {
        color: #8867f2;
        cursor: pointer;
      }
    }
  }
}

.icon-gengduo1 {
  line-height: 32px;
  width: 30px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  margin-left: 5px;
  border-radius: 3px;
  display: inline-block;
  background-color: #d7d0eb;

  &:hover {
    background-color: #ffffff;
    color: #8867f2;
  }
}

.popover-text {
  cursor: pointer;

  p {
    width: 100px;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;

    &:hover {
      background-color: #8867f2;
      color: #fff;
    }
  }
}
</style>
